<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
		<title>个人资料</title>
		<link href="../../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="../../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../../css/infstyle.css" rel="stylesheet" type="text/css">
		<script src="../../AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
		<script src="../../AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script type="text/javascript" src="../../js/sweetalert2.all.js"></script>
	</head>

	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<div class="menu-hd" id="indexHeader">
								</div>
							</div>
						</ul>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</article>
		</header>
		<div class="center">
			<div class="col-main">
				<div class="main-wrap">
					<div class="user-info">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
						</div>
						<hr/>
						<!--个人信息 -->
						<div class="info-main">
							<form class="am-form am-form-horizontal">
								<input type="hidden" id="user-id"/>
								<div class="am-form-group">
									<label for="user-name2" class="am-form-label">用户名</label>
									<div class="am-form-content">
										<input type="text" id="user-name" readonly="readonly">
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-name" class="am-form-label">密码</label>
									<div class="am-form-content">
										<input type="password" id="user-password">
									</div>
								</div>

								<div class="am-form-group">
									<label class="am-form-label">性别</label>
									<div class="am-form-content sex">
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="男"> 男
										</label>
										<label class="am-radio-inline">
											<input type="radio" name="sex" value="女"> 女
										</label>
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-birth" class="am-form-label">年龄</label>
									<div class="am-form-content">
										<input type="number" id="user-age">
									</div>
								</div>
								
								<div class="am-form-group">
									<label for="user-phone" class="am-form-label">电话</label>
									<div class="am-form-content">
										<input id="user-phone" type="tel">
									</div>
								</div>
								<div class="am-form-group">
									<label for="user-email" class="am-form-label">邮件</label>
									<div class="am-form-content">
										<input id="user-email" type="email">

									</div>
								</div>
								<div class="am-form-group">
									<label for="user-email" class="am-form-label">地址</label>
									<div class="am-form-content">
										<input id="user-address"  type="text">
									</div>
								</div>
								<div class="info-btn">
									<div class="am-btn am-btn-danger" onclick="update()">保存修改</div>
								</div>

							</form>
						</div>
					</div>
				</div>
			</div>

			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="index.html">个人中心</a>
					</li>
					<li class="person">
						<a href="#">个人资料</a>
						<ul>
							<li>
								<a href="information.html">信息管理</a>
							</li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的交易</a>
						<ul>
							<li>
								<a href="order.html">买入订单</a>
							</li>
							<li>
								<a href="sellorder.html">卖出订单</a>
							</li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的资产</a>
						<ul>
							<li>
								<a href="collection.html">正在出售</a>
							</li>
							<li>
								<a href="upload.html">去上架</a>
							</li>
						</ul>
					</li>
				</ul>
			</aside>
		</div>
		<script>
			$(function(){
				/*检验用户是否登录*/
				if (getCookie("username") == null || getCookie("userid") == null) {
                    window.location.href="../login.html";
                    return;
			    }else{
			    	$("#indexHeader").append(`
                            <a href="#" target="_top" class="h">您好，${getCookie("username")}</a>
                            <a href="javascript:void(0);" onclick="clearCookie()">退出</a>`
                    );
			    }
			    
			   /*根据userid请求数据*/
			   var userid=getCookie("userid");
			   $.ajax({
			   		type:"get",
					url:"/user/info/"+userid,
					success:function(result){
						var data=result.data;
						$("#user-id").val(data.id);
						$("#user-name").val(data.username);
						$("#user-password").val(data.password);
						$("#user-age").val(data.age);
						$("#user-phone").val(data.telphone);
						$("#user-email").val(data.email);
						$("#user-address").val(data.address);
						if(data.sex=='男'){
							$("input[name='sex'][value='男']").attr("checked",true); 
						}
						if(data.sex=='女'){
							$("input[name='sex'][value='女']").attr("checked",true);
						}
					}
			   });
			})	
		</script>
		
		<script>
			/*更新*/
			function update(){
				var id=$("#user-id").val();
				var password=$("#user-password").val();
				var age=$("#user-age").val();
				var telphone=$("#user-phone").val();
				var email=$("#user-email").val();
				var address=$("#user-address").val();
				var sex=$("input[name='sex']:checked").val();
				if(password==''||password==null){
					swal({
							title: '密码不能为空！',
							type: 'error',
							showConfirmButton: false,
							timer: 1500
						})
					return;
				}
				
				var userdata={"id":id,
				"password":password,"telphone":telphone,"email":email,
				"address":address,"sex":sex,"age":age};
				$.ajax({
					type:"post",
					url:"/user/update",
					data:JSON.stringify(userdata),
					async:true,
					contentType:"application/json; charset=utf-8",
					dataType: "json",
					success: function(result) {
							if(result.resultCode == 200) {
								swal({
									title: '更新成功',
									type: 'success',
									showConfirmButton: false,
									timer: 1500
								})
							} else {
								swal({
									title: '抱歉，更新失败',
									type: 'error',
									showConfirmButton: false,
									timer: 1500
								})
							}
						}
				});
			}
		</script>
	</body>

</html>